<template>
    <div class="section">
        <el-input-number
            v-model="firstValue"
            :precision="propData.rowItem?.precision || 0"
            :controls="false"
            :min="minNum"
            :max="maxNum || propData.rowItem.maxNum"
            :placeholder="`${propData.rowItem.placeholderBefore || ''}`"
            @blur.stop.prevent="changeFirst" />
        <span class="line">-</span>
        <el-input-number
            v-model="secondValue"
            :precision="propData.rowItem?.precision || 0"
            :controls="false"
            :min="minNum"
            :max="maxNum || propData.rowItem.maxNum"
            :placeholder="`${propData.rowItem.placeholderAfter || ''}`"
            @blur.stop.prevent="changeSecond" />
        <span v-if="propData.rowItem?.unit" class="unit">
            {{ propData.rowItem?.unit || '' }}
        </span>
    </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { computed } from 'vue';

type Props = {
    modelValue: number[];
    rowItem: any;
};
const propData = defineProps<Props>();
const emit = defineEmits(['update:modelValue', 'change']);

const firstValue = ref<number>(NaN);
const secondValue = ref<number>(NaN);
const randomKey = ref<string>('123456789098765fer');

const minNum = computed(() => {
    return propData.rowItem.isForbidNegativeNumber ? 0 : -Infinity;
});
const maxNum = computed(() => {
    return propData.rowItem.isForbidNegativeNumber ? propData.rowItem.maxNum : Infinity;
});
const changeFirst = () => {
    const second = propData.modelValue ? (isNumber(propData.modelValue[1]) ? propData.modelValue[1] : NaN) : NaN;
    if (propData.rowItem.isForbidNegativeNumber && isNumber(firstValue.value)) {
        firstValue.value = firstValue.value >= 0 ? firstValue.value : 0;
    }
    let first: number;
    if (firstValue.value == null || isNaN(firstValue.value)) {
        first = firstValue.value ? Number(firstValue.value) : NaN;
    } else {
        first = firstValue.value ? Number(firstValue.value) : 0;
    }

    // eslint-disable-next-line use-isnan
    if (firstValue.value !== null && second !== NaN && firstValue.value <= second) {
        emit('update:modelValue', [first, second]);
        secondValue.value = second;
        // eslint-disable-next-line use-isnan
    } else if (firstValue.value !== null && second !== NaN && firstValue.value > second) {
        emit('update:modelValue', [first, first]);
        secondValue.value = firstValue.value;
    } else {
        secondValue.value = second;
        if ((firstValue.value == null || Number.isNaN(firstValue.value)) && (second == null || Number.isNaN(second))) {
            emit('update:modelValue', []);
        } else {
            emit('update:modelValue', [first, second]);
        }
    }
};

const changeSecond = () => {
    const first = propData.modelValue ? (isNumber(propData.modelValue[0]) ? propData.modelValue[0] : NaN) : NaN;
    if (propData.rowItem.isForbidNegativeNumber && isNumber(secondValue.value)) {
        secondValue.value = secondValue.value >= 0 ? secondValue.value : 0;
    }

    let second: number;
    if (secondValue.value == null || isNaN(secondValue.value)) {
        second = secondValue.value ? Number(secondValue.value) : NaN;
    } else {
        second = secondValue.value ? Number(secondValue.value) : 0;
    }
    // const second = secondValue.value ? Number(secondValue.value) : 0;
    // eslint-disable-next-line use-isnan
    if (secondValue.value !== null && first !== NaN && secondValue.value >= first) {
        emit('update:modelValue', [first, second]);
        firstValue.value = first;
        // eslint-disable-next-line use-isnan
    } else if (secondValue.value !== null && first !== NaN && secondValue.value < first) {
        emit('update:modelValue', [second, second]);
        firstValue.value = secondValue.value;
    } else {
        firstValue.value = first;
        if ((secondValue.value == null || Number.isNaN(secondValue.value)) && (first == null || Number.isNaN(first))) {
            emit('update:modelValue', []);
        } else {
            emit('update:modelValue', [first, second]);
        }
    }
};

const isNumber = (num: any) => {
    return typeof num === 'number' && !isNaN(num);
};

const getRandomKey = (num?: number) => {
    const t = 'ABCDEFGHJKMNPQRSTWXYZ0123456789abcdefhijkmnprstwxyz?_*%$#';
    let total = '';
    let n = 0;
    if (typeof num === 'number' && num > 0 && num < 21) {
        while (n < num) {
            const add = t[Math.round(Math.random() * Number(t.length - 1))];
            total = `${total}${add}`;
            n++;
        }
    } else {
        total = getRandomKey(16);
    }
    return total;
};

watch(
    () => propData.modelValue,
    val => {
        if (!val?.length) {
            firstValue.value = NaN;
            secondValue.value = NaN;
            emit('change', []);
        } else {
            if (!val.some(item => isNumber(item))) {
                emit('change', []);
            } else {
                emit('change', val);
            }
        }
        randomKey.value = getRandomKey();
    },
    { deep: true }
);
</script>
<style scoped lang="scss">
.section {
    width: 100%;
    display: flex;
    align-content: center;
    overflow: hidden;

    .line {
        padding: 0 6px;
    }

    .unit {
        padding-left: 4px;
    }

    .el-input-number {
        flex: 1;
    }
}
</style>
